<template>
    <div class="tmpl">
        <!--{{this.$route.params.id}}-->
        <div class="title">
            <!--<p v-text="article.title"></p> 方法一-->
            <p class="ptitle">{{article.title}}</p>
            <p class="otitle">
                {{article.add_time | fmtdate('YYYY-MM-DD')}}
                {{article.click}}次浏览
                分类:***
            </p>
        </div>
        <div class="content" v-html="article.content"></div>
        <!--3.0 使用评论***********************************************-->
         <div>
             <subComment2 :artid="newid"></subComment2>
         </div>
    </div>
</template>

<style scoped>
    .title{
        height:100%;
        border-bottom: 2px solid rgba(92,92,92,0.1);
        padding:5px;
    }
    .content{
        padding:8px;
    }
    .title .ptitle{
        font-size: 18px;
        font-weight:bold;
        color: #0094ff;
    }
    .title .otitle{
        font-size: 12px;
        color: rgba(92,92,92,0.7);
    }


</style>

<script>
    //common中存了公用的域名，方便下次统一修改
    import  common from '../../kits/common.js';
    import subComment2 from '../SubComp/subComment.vue';//1.0这是导入评论组件***************************
    export default{
        data(){
            return{
                article:{},
                newid:0  //3.0定义评论组件要接收的数据*********************************
            }
        },
        components:{
          subComment2  //2.0注册私有组件评论******************************************
        },
        created(){
            this.getData();
            //4.0 获取url传过来的id值
            this.newid = this.$route.params.id;
        },
        methods:{
            getData(){
                //根据传入的id值，使用ajax请求详情页内容
                //获取传入id值
                let id = this.$route.params.id;
                //拼接url
                let url = common.apihost + '/api/getnew/' + id;
                this.$http.get(url).then(
                    res=>{
                        //获取到的数据,但是message是一个数组，不是json，所以应该取0索引
                        this.article = res.body.message[0];
                    },
                    res=>{
                        console.log("哎哟，请求详情出错了");
                    }
                );
            }
        }
    }
</script>